<template>
  <div class="login">
    <div class="login-title">
      <span>追寻</span>
      <span>摄影</span>
      <div class="title-skip" @click="goindex">跳过</div>
    </div>
    <div class="login-role">
      <div class="role-method">
        <div class="method-left">
          <span>密码登录</span>
        </div>
        <div class="method-right">
          <span>手机登录</span>
          <i class="iconfont icon-arrow-left"></i>
        </div>
      </div>
      <div class="role-input">
        <i class="iconfont icon-shouji"></i>
        <input type="search" v-model="user.username" placeholder="手机号/用户名/邮箱">
      </div>
      <div class="role-input">
        <i class="iconfont icon-mima"></i>
        <input type="password" v-model="user.password" placeholder="请输入密码">
      </div>
      <div class="role-forget">
        <span @click="forget">忘记密码</span>
      </div>
      <div class="role-login">
        <button :disabled="!(user.username && user.password)" @click="tijiao">登录</button>
      </div>
      <div class="role-goregister">
        <span>还没有账号?</span>
        <span @click="goregister">立即注册</span>
      </div>
    </div>
    <div class="login-other">
      <div class="other-login">
        <span>第三方登录</span>
      </div>
      <div class="other-way">
        <div class="way-icon">
          <i class="iconfont icon-QQ4-copy"></i>
        </div>
        <div class="way-icon">
          <i class="iconfont icon-weixinx"></i>
        </div>
        <div class="way-icon">
          <i class="iconfont icon-weibo1"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  name: 'HelloWorld',
  data () {
    return {
      user: {
        username: '15678383289',
        password: 'lhc07210911'
      },
    }
  },
  methods:{
    async tijiao(){
      if(!(this.user.username && this.user.password)){
        Toast.fail('信息不完整')
        return
      }
      try {
        const res = await this.$axios({
          url:'/blog/login',
          method:"post",
          data:{
            phone: this.user.username,
            pas: this.user.password
          }
        })
        const {success, msg, data} = res.data
        if (success){

          console.info(data)
          Toast.success('登录成功')
          this.$socket.emit('vuelogin', {username:data.uid})
          const user_json = JSON.stringify(data)
          const uid = JSON.stringify(data.uid)
          localStorage.setItem("uid", uid)
          try {
            const msglist = await this.$axios({
              url: '/blog/socketfind',
              method: 'post',
              data: {
                id: localStorage.getItem('uid')
              }
            })
            const { success, data } = msglist.data
            if( success ){
              console.info('入库1')
              console.info(data)
              this.$store.commit('creatlist',data)
              console.info('入库2')
              setTimeout(()=>{
                console.info('跳转')
                this.$router.replace('/index')
              },1000)
            }
          }catch (e) {
          }
          localStorage.setItem("userlis", user_json)


        }else {
          Toast.fail(msg)
        }
      }catch (e) {
        Toast.fail(e)
      }
    },
    goregister(){
      this.$router.push('/register')
    },
    forget(){
      this.$router.push('/forget')
    },
    goindex(){
      this.$router.push('/index')
    }
  }
}
</script>

<style scoped lang="scss">
.login{
  background: url(../assets/logins.jpg);
  background-size: cover;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  .login-title{
    margin-top: vw(30);
    width: 100%;
    height: vw(90);
    box-sizing: border-box;
    text-align: center;
    line-height: vw(90);
    position: relative;
    span{
      font-size: vw(50);
      padding: 0 vw(35);
      color: #dbdbdb;
    }
    .title-skip{
      position: absolute;
      width: vw(100);
      height: vw(40);
      line-height: vw(40);
      top: 50%;
      right: vw(30);
      transform: translateY(vw(-20));
      padding: 0 vw(10);
      border: 1px solid white;
      border-radius: vw(10);
      font-size: vw(20);
      color: #dbdbdb;
    }
  }
  .login-role{
    margin-top: vw(200);
    .role-input{
      text-align: center;
      position: relative;
      input{
        width: vw(550);
        height: vw(80);
        background-color: #00000000;
        list-style: none;
        outline: none;
        border: 0;
        border-bottom: 1px solid #c2c2c2;
        color: white;
        padding: 0;
        padding-left: vw(80);
        box-sizing: border-box;
        font-size: vw(25);
        &:focus{
          border-bottom: 1px solid #ffffff;
        }
        &::-webkit-input-placeholder{
          color: #e5e4e4;
        }
      }
      i{
        position: absolute;
        font-size: vw(50);
        top: 50%;
        transform: translate(vw(15),vw(-28));
        color: #c1c1c1;
      }
      &:nth-child(3){
        input{
          margin-top: vw(40);
        }
        i{
          position: absolute;
          font-size: vw(50);
          top: 50%;
          transform: translate(vw(15),vw(-10));
          color: #c1c1c1;
        }
      }
    }
    .role-method{
      width: vw(550);
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      padding-bottom: vw(30);
      color: #ffffff;
      font-size: vw(33);
      .method-right{
        span{
          font-size: vw(25);
          padding-left: vw(10);
        }
        i{
          font-size: vw(25);
        }
      }
    }
    .role-forget{
      width: vw(550);
      margin: 0 auto;
      display: flex;
      justify-content: flex-end;
      span{
        padding-top: vw(20);
        color: #c1c1c1;
        font-size: vw(20);
      }
    }
    .role-login{
      width: vw(550);
      margin: vw(100) auto;
      text-align: center;
      margin-bottom: vw(20);
      button{
        padding: vw(15) vw(180);
        outline: none;
        background-color: #ffffff00;
        border: 1px solid #ffffff;
        border-radius: vw(10);
        color: #ffffff;
        &:active{
          background-color: #ffffff20;
        }
      }
    }
    .role-goregister{
      width: vw(550);
      margin: 0 auto;
      text-align: center;
      span{
        margin: 0 vw(20);
        font-size: vw(20);
        color: #ffffff;
        &:last-child{
          text-decoration: underline;
          color: lightgoldenrodyellow;
        }
      }
    }
  }
  .login-other{
    width: vw(550);
    margin: vw(150) auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    .other-login{
      color: #ffffff;
    }
    .other-way{
      margin-top: vw(50);
      width: vw(400);
      display: flex;
      justify-content: space-between;
      .way-icon{
        i{
          font-size: vw(70);
          color: #ffffff;
        }
      }
    }
  }
}
</style>
